<template>
    <page-view class=" bg-gray-100 flex flex-col">
        <div class="relative text-gray-700 w-full bg-white p-[10px] box-border">
            <h2 class=" p-0 m-0 mt-6">欢迎来到糗事百科</h2>
            <div v-if="!_userInfoStore.nick_name" class="h-[80px]">
                <p class="p-0 m-0 mt-2 text-gray-400 text-[14px]">马上登录跟大家一起糗</p>
                <Button @click="$router.push({ name: 'login' })" class=" mt-3 px-10 h-8 opacity-80"
                    color="linear-gradient(to right, #ff6034, #ee0a24)">
                    登录/注册
                </Button>
            </div>
            <div v-else class="h-[80px]  flex items-center">
                <b>欢迎登录：{{ _userInfoStore.nick_name }}</b>
            </div>
            <div class=" absolute h-[120px] right-5 bottom-0">
                <img v-if="!_userInfoStore.avatar" class=" object-cover w-full h-full" src="../assets/img/sign.jpg" alt="">
                <img v-else class=" object-cover w-[90px] h-[90px] rounded-full" :src="BASE_URL + _userInfoStore.avatar"
                    alt="">
            </div>
        </div>
        <CellGroup class=" mt-2">
            <div class=" h-40 p-2">
                <img class=" object-cover w-full h-full" src="../assets/img/Lancer.jpg" alt="" />
            </div>
            <Cell class=" p-4 font-bold text-[16px]" title="历史记录" is-link />
        </CellGroup>
        <CellGroup class=" mt-2">
            <Cell class=" p-4 font-bold text-[16px]" title="金币" is-link />
        </CellGroup>
        <CellGroup class=" mt-2">
            <Cell class=" p-4 font-bold text-[16px]" title="创作中心" is-link />
            <Cell class=" p-4 font-bold text-[16px]" title="原创特权" is-link />
        </CellGroup>
        <div class=" h-96 w-full bg-white mt-2">
            <Cell class=" p-4 font-bold text-[16px]" title="更多功能" />
            <Grid :column-num="4" :border="false">
                <GridItem v-for="(item, index) in iconList" :key="index" :icon="item.icon" :text="item.text" />
            </Grid>
        </div>
    </page-view>
</template>

<script setup>
import PageView from '@/components/PageView';
import { Divider, Cell, CellGroup, Grid, GridItem, Button, Image } from 'vant';
import { reactive, inject } from 'vue';
import userInfoStore from '@/store/userInfoStore';
const _userInfoStore = userInfoStore();

const BASE_URL = inject("BASE_URL");

const iconList = reactive([
    { icon: 'fire-o', text: '热评鉴定' },
    { icon: 'video-o', text: '视频' },
    { icon: 'bag-o', text: '我的订单' },
    { icon: 'warning-o', text: '小黑屋' },
    { icon: 'label-o', text: '卡包' },
    { icon: 'shop-o', text: '糗糗商城' },
    { icon: 'after-sale', text: '放心借' },
    { icon: 'warn-o', text: '意见反馈' },
    { icon: 'setting-o', text: '设置' },
    { icon: 'delete-o', text: '删除' },
])
</script>

<style lang='scss' scoped></style>